Material Design Colors
This is a variable list of all of the material design colors as featured on the Material Design Websites. TWEM originally created the list to be used for the interwiki CSS file where instead of pasting all of the color variables from the material design colors page, one color could be typed in as a variable. TWEM attempted to implement this by using the variable to fill in another variable but was unable to do so and make it work. Material Design Color page. /*material design colors */ --Red100: #FFCDD2; --Red100Color: #000; --Red200: #EF9A9A; --Red200Color: #000; --Red300: #E57373; --Red300Color: #000; --Red400: #EF5350; --Red400Color: #FFF; --Red500: #F44336; --Red500Color: #FFF; --Red600: #E53935; --Red600Color: #FFF; --Red700: #D32F2F; --Red700Color: #FFF; --Red800: #C62828; --Red800Color: #FFF; --Red900: #B71C1C; --Red900Color: #FFF; --RedA100: #FF8A80; --RedA100Color: #000; --RedA200: #FF5252; --Red400Color: #FFF; --RedA400: #FF1744; --RedA400Color: #FFF; --RedA700: #D50000; --RedA400Color: #FFF; /* Pink */ --Pink100: #F8BBD0; --Pink100Color: #000; --Pink200: #F48FB1; --Pink200Color: #000; --Pink300: #F06292; --Pink300Color: #000; --Pink400: #EC407A; --Pink400Color: #FFF; --Pink500: #E91E63; --Pink500Color: #FFF; --Pink600: #D81B60; --Pink600Color: #FFF; --Pink700: #C2185B; --Pink700Color: #FFF; --Pink800: #AD1457; --Pink800Color: #FFF; --Pink900: #880E4F; --Pink900Color: #FFF; --PinkA100: #FF80AB; --PinkA100Color: #000; --PinkA200: #FF4081; --PinkA200Color: #FFF; --PinkA400: #F50057; --PinkA400Color: #FFF; --PinkA700: #C51162; --PinkA700Color: #FFF; /* Purple */ --Purple100: #E1BEE7; --Purple100Color: #000; --Purple200: #CE93D8; --Purple200Color: #000; --Purple300: #BA68C8; --Purple300Color: #FFF; --Purple400: #AB47BC; --Purple400Color: #FFF; --Purple500: #9C27B0; --Purple500Color: #FFF; --Purple600: #8E24AA; --Purple600Color: #FFF; --Purple700: #7B1FA2; --Purple700Color: #FFF; --Purple800: #6A1B9A; --Purple800Color: #FFF; --Purple900: #4A148C; --Purple900Color: #FFF; --PurpleA100: #EA80FC; --PurpleA100Color: #000; --PurpleA200: #E040FB; --PurpleA200Color: #FFF; --PurpleA400: #D500F9; --PurpleA400Color: #FFF; --PurpleA700: #AA00FF; --PurpleA700Color: #FFF; /* Deep Purple */ --DeepPurple100: #D1C4E9; --DeepPurple100Color: #000; --DeepPurple200: #B39DDB; --DeepPurple200Color: #000; --DeepPurple300: #9575CD; --DeepPurple300Color: #FFF; --DeepPurple400: #7E57C2; --DeepPurple400Color: #FFF; --DeepPurple500: #673AB7; --DeepPurple500Color: #FFF; --DeepPurple600: #5E35B1; --DeepPurple600Color: #FFF; --DeepPurple700: #512DA8; --DeepPurple700Color: #FFF; --DeepPurple800: #4527A0; --DeepPurple800Color: #FFF; --DeepPurple900: #311B92; --DeepPurple900Color: #FFF; --DeepPurpleA100: #B388FF; --DeepPurpleA100Color: #000; --DeepPurpleA200: #7C4DFF; --DeepPurpleA200Color: #FFF; --DeepPurpleA400: #651FFF; --DeepPurpleA400Color: #FFF; --DeepPurpleA700: #6200EA; --DeepPurpleA700Color: #FFF; /* Indigo */ --Indigo100: #C5CAE9; --Indigo100Color: #000; --Indigo200: #9FA8DA; --Indigo200Color: #000; --Indigo300: #7986CB; --Indigo300Color: #FFF; --Indigo400: #5C6BC0; --Indigo400Color: #FFF; --Indigo500: #3F51B5; --Indigo500Color: #FFF; --Indigo600: #3949AB; --Indigo600Color: #FFF; --Indigo700: #303F9F; --Indigo700Color: #FFF; --Indigo800: #283593; --Indigo800Color: #FFF; --Indigo900: #1A237E; --Indigo900Color: #FFF; --IndigoA100: #8C9EFF; --IndigoA100Color: #000; --IndigoA200: #536DFE; --IndigoA200Color: #FFF; --IndigoA400: #3D5AFE; --IndigoA400Color: #FFF; --IndigoA700: #304FFE; --IndigoA700Color: #FFF; /* Blue */ --Blue100: #BBDEFB; --Blue100Color: #000; --Blue200: #90CAF9; --Blue200Color: #000; --Blue300: #64B5F6; --Blue300Color: #000; --Blue400: #42A5F5; --Blue400Color: #000; --Blue500: #2196F3; --Blue500Color: #000; --Blue600: #1E88E5; --Blue600Color: #FFF; --Blue700: #1976D2; --Blue700Color: #FFF; --Blue800: #1565C0; --Blue800Color: #FFF; --Blue900: #0D47A1; --Blue900Color: #FFF; --BlueA100: #82B1FF; --BlueA100Color: #000; --BlueA200: #448AFF; --BlueA200Color: #FFF; --BlueA400: #2979FF; --BlueA400Color: #FFF; --BlueA700: #2962FF; --BlueA700Color: #FFF; /* Light Blue */ --LighBlue100: #B3E5FC; --LighBlue100Color: #000; --LighBlue200: #81D4FA; --LighBlue200Color: #000; --LighBlue300: #4FC3F7; --LighBlue300Color: #000; --LighBlue400: #29B6F6; --LighBlue400Color: #000; --LighBlue500: #03A9F4; --LighBlue500Color: #000; --LighBlue600: #039BE5; --LighBlue600Color: #000; --LighBlue700: #0288D1; --LighBlue700Color: #FFF; --LighBlue800: #0277BD; --LighBlue800Color: #FFF; --LighBlue900: #01579B; --LighBlue900Color: #FFF; --LighBlueA100: #80D8FF; --LighBlueA100Color: #000; --LighBlueA200: #40C4FF; --LighBlueA200Color: #000; --LighBlueA400: #00B0FF; --LighBlueA400Color: #000; --LighBlueA700: #0091EA; --LighBlueA700Color: #FFF; /* Cyan */ --Cyan100: #B2EBF2; --Cyan100Color: #000; --Cyan200: #80DEEA; --Cyan200Color: #000; --Cyan300: #4DD0E1; --Cyan300Color: #000; --Cyan400: #26C6DA; --Cyan400Color: #000; --Cyan500: #00BCD4; --Cyan500Color: #000; --Cyan600: #00ACC1; --Cyan600Color: #000; --Cyan700: #0097A7; --Cyan700Color: #FFF; --Cyan800: #00838F; --Cyan800Color: #FFF; --Cyan900: #006064; --Cyan900Color: #FFF; --CyanA100: #84FFFF; --CyanA100Color: #000; --CyanA200: #18FFFF; --CyanA200Color: #000; --CyanA400: #00E5FF; --CyanA400Color: #000; --CyanA700: #00B8D4; --CyanA700Color: #000; /* Teal */ --Teal100: #B2DFDB; --Teal100Color: #000; --Teal200: #80CBC4; --Teal200Color: #000; --Teal300: #4DB6AC; --Teal300Color: #000; --Teal400: #26A69A; --Teal400Color: #000; --Teal500: #009688; --Teal500Color: #FFF; --Teal600: #00897B; --Teal600Color: #FFF; --Teal700: #00796B; --Teal700Color: #FFF; --Teal800: #00695C; --Teal800Color: #FFF; --Teal900: #004D40; --Teal900Color: #FFF; --TealA100: #A7FFEB; --TealA100Color: #000; --TealA200: #1DE9B6; --TealA200Color: #000; --TealA400: #1DE9B6; --TealA500Color: #000; --TealA700: #00BFA5; --TealA700Color: #000; /* Green */ --Green100: #C8E6C9; --Green100Color: #000; --Green200: #A5D6A7; --Green200Color: #000; --Green300: #81C784; --Green300Color: #000; --Green400: #66BB6A; --Green400Color: #000; --Green500: #4CAF50; --Green500Color: #000; --Green600: #43A047; --Green600Color: #FFF; --Green700: #388E3C; --Green600Color: #FFF; --Green800: #2E7D32; --Green600Color: #FFF; --Green900: #1B5E20; --Green600Color: #FFF; --GreenA100: #B9F6CA; --GreenA100Color: #000; --GreenA200: #69F0AE; --GreenA200Color: #000; --GreenA400: #00E676; --GreenA400Color: #000; --GreenA700: #00C853; --GreenA700Color: #000; /* Light Green */ --LightGreen100: #DCEDC8; --LightGreen100Color: #000; --LightGreen200: #AED581; --LightGreen200Color: #000; --LightGreen300: #AED581; --LightGreen300Color: #000; --LightGreen400: #9CCC65; --LightGreen400Color: #000; --LightGreen500: #8BC34A; --LightGreen500Color: #000; --LightGreen600: #7CB342; --LightGreen600Color: #000; --LightGreen700: #689F38; --LightGreen700Color: #000; --LightGreen800: #558B2F; --LightGreen800Color: #FFF; --LightGreen900: #33691E; --LightGreen900Color: #FFF; --LightGreenA100: #CCFF90; --LightGreenA100Color: #000; --LightGreenA200: #B2FF59; --LightGreenA200Color: #000; --LightGreenA400: #76FF03; --LightGreenA400Color: #000; --LightGreenA700: #64DD17; --LightGreenA700Color: #000; /* Lime */ --Lime100: #F0F4C3; --Lime100Color: #000; --Lime200: #E6EE9C; --Lime200Color: #000; --Lime300: #DCE775; --Lime300Color: #000; --Lime400: #D4E157; --Lime400Color: #000; --Lime500: #CDDC39; --Lime500Color: #000; --Lime600: #C0CA33; --Lime600Color: #000; --Lime700: #AFB42B; --Lime700Color: #000; --Lime800: #9E9D24; --Lime800Color: #000; --Lime900: #827717; --Lime900Color: #FFF; --LimeA100: #F4FF81; --LimeA100Color: #000; --LimeA200: #EEFF41; --LimeA200Color: #000; --LimeA400: #C6FF00; --LimeA400Color: #000; --LimeA700: #AEEA00; --LimeA700Color: #000; /* Yellow */ --Yellow100: #FFF9C4; --Yellow100Color: #000; --Yellow200: #FFF59D; --Yellow200Color: #000; --Yellow300: #FFF176; --Yellow300Color: #000; --Yellow400: #FFEE58; --Yellow400Color: #000; --Yellow500: #FFEB3B; --Yellow500Color: #000; --Yellow600: #FDD835; --Yellow600Color: #000; --Yellow700: #FBC02D; --Yellow700Color: #000; --Yellow800: #F9A825; --Yellow800Color: #000; --Yellow900: #F57F17; --Yellow900Color: #000; --YellowA100: #FFFF8D; --YellowA100Color: #000; --YellowA200: #FFFF00; --YellowA200Color: #000; --YellowA400: #FFEA00; --YellowA400Color: #000; --YellowA700: #FFD600; --YellowA700Color: #000; /* Amber */ --Amber100: #FFECB3; --Amber100Color: #000; --Amber200: #FFE082; --Amber200Color: #000; --Amber300: #FFD54F; --Amber300Color: #000; --Amber400: #FFCA28; --Amber400Color: #000; --Amber500: #FFC107; --Amber500Color: #000; --Amber600: #FFB300; --Amber600Color: #000; --Amber700: #FFA000; --Amber700Color: #000; --Amber800: #FF6F00; --Amber800Color: #000; --Amber900: #FF6F00; --Amber900Color: #000; --AmberA100: #FFE57F; --AmberA100Color: #000; --AmberA200: #FFD740; --AmberA200Color: #000; --AmberA400: #FFC400; --AmberA400Color: #000; --AmberA700: #FFAB00; --AmberA700Color: #000; /* Orange */ --Orange100: #FFE0B2; --Orange100Color: #000; --Orange200: #FFCC80; --Orange200Color: #000; --Orange300: #FFB74D; --Orange300Color: #000; --Orange400: #FFA726; --Orange400Color: #000; --Orange500: #FF9800; --Orange500Color: #000; --Orange600: #FB8C00; --Orange600Color: #000; --Orange700: #F57C00; --Orange700Color: #000; --Orange800: #EF6C00; --Orange800Color: #000; --Orange900: #E65100; --Orange900Color: #FFF; --OrangeA100: #FFD180; --OrangeA100Color: #000; --OrangeA200: #FFAB40; --OrangeA200Color: #000; --OrangeA400: #FF9100; --OrangeA400Color: #000; --OrangeA700: #FF6D00; --OrangeA700Color: #000; /* Deep Orange */ --DeepOrange100: #FFCCBC; --DeepOrange100Color: #000; --DeepOrange200: #FFAB91; --DeepOrange200Color: #000; --DeepOrange300: #FF8A65; --DeepOrange300Color: #000; --DeepOrange400: #FF7043; --DeepOrange400Color: #000; --DeepOrange500: #FF5722; --DeepOrange500Color: #000; --DeepOrange600: #F4511E; --DeepOrange600Color: #FFF; --DeepOrange700: #E64A19; --DeepOrange700Color: #FFF; --DeepOrange800: #D84315; --DeepOrange800Color: #FFF; --DeepOrange900: #BF360C; --DeepOrange900Color: #FFF; --DeepOrangeA100: #FF9E80; --DeepOrangeA100Color: #000; --DeepOrangeA200: #FF6E40; --DeepOrangeA200Color: #000; --DeepOrangeA400: #FF3D00; --DeepOrangeA400Color: #FFF; --DeepOrangeA700: #DD2C00; --DeepOrangeA700Color: #FFF; /* Brown */ --Brown100: #D7CCC8; --Brown100Color: #000; --Brown200: #BCAAA4; --Brown200Color: #000; --Brown300: #A1887F; --Brown300Color: #FFF; --Brown400: #8D6E63; --Brown400Color: #FFF; --Brown500: #795548; --Brown500Color: #FFF; --Brown600: #6D4C41; --Brown600Color: #FFF; --Brown700: #5D4037; --Brown700Color: #FFF; --Brown800: #4E342E; --Brown800Color: #FFF; --Brown900: #3E2723; --Brown900Color: #FFF; /* these accent colors are not part of material design and were picked elsewhere */ --BrownA100: #CCA698; --BrownA100Color: #000; --BrownA200: #A47A6A; --BrownA200Color: #000; --BrownA400: #63392A; --BrownA400Color: #FFF; --BrownA700: #4E2415; --BrownA700Color: #FFF; /* Blue Grey */ --BlueGrey100: #CFD8DC; --BlueGrey100Color: #000; --BlueGrey200: #B0BEC5; --BlueGrey200Color: #000; --BlueGrey300: #90A4AE; --BlueGrey300Color: #FFF; --BlueGrey400: #78909C; --BlueGrey400Color: #FFF; --BlueGrey500: #607D8B; --BlueGrey500Color: #FFF; --BlueGrey600: #546E7A; --BlueGrey600Color: #FFF; --BlueGrey700: #455A64; --BlueGrey700Color: #FFF; --BlueGrey800: #37474F; --BlueGrey800Color: #FFF; --BlueGrey900: #263238; --BlueGrey900Color: #FFF; /* these accent colors are not part of material design and were picked elsewhere */ --BlueGreyA100: #BCC8CE; --BlueGreyA100Color: #000; --BlueGreyA200: #859AA4; --BlueGreyA200Color: #000; --BlueGreyA400: #416475; --BlueGreyA400Color: #FFF; --BlueGreyA700: #294C5D; --BlueGreyA700Color: #FFF; /* Blue Gray (both spellings for Gray / Grey are common, at least in the western world where the majority of users are */ --BlueGray100: #CFD8DC; --BlueGray100Color: #000; --BlueGray200: #B0BEC5; --BlueGray200Color: #000; --BlueGray300: #90A4AE; --BlueGray300Color: #000; --BlueGray400: #78909C; --BlueGray400Color: #FFF; --BlueGray500: #607D8B; --BlueGray500Color: #FFF; --BlueGray600: #546E7A; --BlueGray600Color: #FFF; --BlueGray700: #455A64; --BlueGray700Color: #FFF; --BlueGray800: #37474F; --BlueGray800Color: #FFF; --BlueGray900: #263238; --BlueGray900Color: #FFF; /* these accent colors are not part of material design and were picked elsewhere */ --BlueGrayA100: #BCC8CE; --BlueGrayA100Color: #000; --BlueGrayA200: #859AA4; --BlueGrayA200Color: #000; --BlueGrayA400: #416475; --BlueGrayA400Color: #FFF; --BlueGrayA700: #294C5D; --BlueGrayA700Color: #FFF; /* Gray (both spellings for Gray / Grey are common, at least in the western world where the majority of users are */ --Gray100: #F5F5F5 --Gray100Color: #000; --Gray200: #EEEEEE; --Gray200Color: #000; --Gray300: #E0E0E0; --Gray300Color: #000; --Gray400: #BDBDBD; --Gray400Color: #000; --Gray500: #9E9E9E; --Gray500Color: #000; --Gray600: #757575; --Gray600Color: #FFF; --Gray700: #616161; --Gray700Color: #FFF; --Gray800: #424242; --Gray800Color: #FFF; --Gray900: #212121; --Gray900Color: #FFF; /* these accent colors are not part of material design and were picked elsewhere */ --GrayA100: #FEFEFE; --GrayA100Color: #000; --GrayA200: #C9C9C9; --GrayA200Color: #000; --GrayA400: #717171; --GrayA40Color: #FFF; --GrayA700: #3B3A3A; --GrayA700Color: #FFF; /* Grey (both spellings for Grey / Grey are common, at least in the western world where the majority of users are */ --Grey100: #F5F5F5 --Grey100Color: #000; --Grey200: #EEEEEE; --Grey200Color: #000; --Grey300: #E0E0E0; --Grey300Color: #000; --Grey400: #BDBDBD; --Grey400Color: #000; --Grey500: #9E9E9E; --Grey500Color: #000; --Grey600: #757575; --Grey600Color: #FFF; --Grey700: #616161; --Grey700Color: #FFF; --Grey800: #424242; --Grey800Color: #FFF; --Grey900: #212121; --Grey900Color: #FFF; /* these accent colors are not part of material design and were picked elsewhere */ --GreyA100: #FEFEFE; --GreyA100Color: #000; --GreyA200: #C9C9C9; --GreyA200Color: #000; --GreyA400: #717171; --GreyA40Color: #FFF; --GreyA700: #3B3A3A; --GreyA700Color: #FFF;